---
id: installation
title: ''
sidebar_label: Installation
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { SiExpo, SiReact } from 'react-icons/si';

## Installation

### Stable

Stable version of React Native Elements available on npm

<Tabs
groupId='pkg'
values={[
{ label: 'NPM', value: 'npm', },
{ label: 'Yarn', value: 'yarn', },
]}>
<TabItem value="npm">

```bash
npm install @rneui/themed @rneui/base
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add @rneui/themed @rneui/base
```

</TabItem>
</Tabs>

### Bleeding Edge

<Tabs
groupId='pkg'
values={[
{ label: 'NPM', value: 'npm', },
{ label: 'Yarn', value: 'yarn', },
]}>
<TabItem value="npm">

```bash
npm install @rneui/base@edge @rneui/themed@edge
```

If you are facing issue while installing from `edge` dist-tag, you can install directly from Github

```bash
# @rneui/base
npm install react-native-elements/react-native-elements#base

# @rneui/themed
npm install react-native-elements/react-native-elements#themed
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add @rneui/base@edge @rneui/themed@edge
```

If you are facing issue while installing from `edge` dist-tag, you can install directly from Github

```bash
# @rneui/base
yarn add @rneui/base@github:react-native-elements/react-native-elements#base

# @rneui/themed
yarn add @rneui/themed@github:react-native-elements/react-native-elements#themed
```

</TabItem>
</Tabs>

## Peer dependencies

### Install react-native-vector-icons

[Expo](https://expo.io) or
[create-react-native-app](https://github.com/react-community/create-react-native-app)
projects include **react-native-vector-icons** out of the box, hence this step can be skipped.

If your project is a standard React Native project created using
`react-native init` (it should have an ios/android directory), then you need to install `react-native-vector-icons`.

Or if you encounter the following error.

:::note

If you see the `UNMET PEER DEPENDENCY` warning for **react-native-vector-icons** like below, you can ignore it as _react-native-vector-icons_ is already installed by _expo_ or _crna_.

<img
  alt="React Native Vector Icons Unmet Peer Dependency"
  src={useBaseUrl('img/peer-dep-error.png')}
/>

:::

Otherwise run the following command:

:::tip

Manual linking of react-native-vector-icons is not necessary if you're using react-native@0.60.0 or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run `react-native unlink react-native-vector-icons` and the process will run as expected.

:::

<Tabs
defaultValue="npm"
values={[
{ label: 'NPM', value: 'npm', },
{ label: 'Yarn', value: 'yarn', },
]
}>
<TabItem value="npm">

```bash
npm install react-native-vector-icons
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add react-native-vector-icons
```

</TabItem>
</Tabs>

Link the dependency

```bash
npx react-native link react-native-vector-icons
```

_If you have any issues installing react-native-vector-icons, check out their
installation guide
[here](https://github.com/oblador/react-native-vector-icons#installation) or
debug it using
[this issue](https://github.com/react-native-elements/react-native-elements/issues/503)._

### Install react-native-safe-area-context

If you have already installed **react-native-safe-area-context** as a dependency for
your project you can skip this step. Otherwise run the following command:

<Tabs
defaultValue="npm"
groupId='pkg'
values={[
{ label: 'NPM', value: 'npm', },
{ label: 'Yarn', value: 'yarn', },
]
}>
<TabItem value="npm">

```bash
npm install react-native-safe-area-context
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add react-native-safe-area-context
```

</TabItem>
</Tabs>

:::info Useful information.

Manual linking of react-native-safe-area-context is not necessary if you're using react-native@0.60.0 or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run `react-native unlink react-native-safe-area-context` and the process will run as expected.

:::

```bash
npx react-native link react-native-safe-area-context
```

It is required to add the `SafeAreaProvider` to the outside of the app. The suggested way to do this is
the following:

```js
import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}
```

## Using Expo

### New Expo project

Create a new project with Expo CLI and React Native Elements template

<Tabs
defaultValue="stable"
values={[
{ label: 'Stable', value: 'stable', },
{ label: 'Bleeding Edge', value: 'edge', },
]
}>
<TabItem value="stable">

```bash
expo init app --template @rneui/template
```

</TabItem>
<TabItem value="edge">

```bash
expo init app --template @rneui/template@edge
```

</TabItem>
</Tabs>

### Existing Expo project

Just install the package and its peer dependencies

## Using on Web

React Native Elements just like on mobile can be used in your web projects. This is possible using [react-native-web](https://github.com/necolas/react-native-web). We'll highlight how to set this up using create-react-app.

### Why do I have to set this up?

On the web, you can usually use UI libraries directly from npm without any additional setup. However in react-native, it's a bit different.

The major difference is that React Native can support JSX and advanced javascript out the box. This means that we don't need to transpile our code before we ship it to npm. **We ship JSX and advanced javascript directly to npm** in React Native Elements, so we need to account for this in our web projects.

### Create React App

[Create React App](https://create-react-app.dev/) is a very popular framework for building react applications. Unfortunately it doesn't allow much customization of the build setup. To accomplish this we'll be making use of [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra).

After creating a new create-react-app project, run the following commands.

```bash
yarn add  @rneui/base @rneui/themed react-native-web react-native-vector-icons
```

```bash
yarn add --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired
```

Secondly, create a `config-overrides.js` file in the root of your project.

```js
const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/@rneui/base'),
    path.resolve(__dirname, 'node_modules/@rneui/themed'),
    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
    path.resolve(__dirname, 'node_modules/react-native-ratings'),
    path.resolve(__dirname, 'src'),
  ])
);
```

Also you should keep in mind that not all of React Native components are implemented for web-platform out-of-box.
For example, `Modal` component is not yet implemented in `react-native-web`. Therefore, to use some of our components
you may need to install additional third-party libraries that implement the missing functionality.
For [`Overlay`](components/Overlay.mdx) and [`Tooltip`](components/Tooltip.mdx) components `Modal` implementation is required.

Lastly, change your scripts in `package.json` to use react-app-rewired:

```diff
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test"
}
```

At this point your app can start. However trying to use any components that use icons, will not show them. In your App.js, load these fonts as you would on the web with a style tag.

```jsx
<style type="text/css">{`
  @font-face {
    font-family: 'MaterialIcons';
    src: url(${require('react-native-vector-icons/Fonts/MaterialIcons.ttf')}) format('truetype');
  }

  @font-face {
    font-family: 'FontAwesome';
    src: url(${require('react-native-vector-icons/Fonts/FontAwesome.ttf')}) format('truetype');
  }
`}</style>
```

The full setup of the guide can be found at https://github.com/react-native-elements/create-react-app-example.
